<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css" />
		<style type="text/css">
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
			}
			
			
			
.textlist{
	width: 100%;
	
}
.checklist{
				background-color: white !important;
				border-radius: 0.5em;
				margin: 5px auto;
				padding: 10px;
			}
			.flex1{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}
			.left{
				width: 25%;
			}
			.left>img{
				width: 100%;
				border-radius:50% ;
			}
			
			.right{
				padding-left:1em ;
				width: 80%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				color: #676664;
				
			}
			.right>div{
				padding: 0.2em;
				
			}
			.right:after{
				content: '>';
				width: 1em;
				height: 1em;
				font-weight: 700;
				position: absolute;
				right: 0.5em;
			}
			.flexrowbetween{
				display: flex;
				width: 60%;
				justify-content: space-between;
				align-items: center;
			}
			
			
			.search {
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			
			.stext {
				width: 25%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right: 1px solid #C7C7CC;
			}
			
			.simg {
				width: 30px;
				height: 30px;
			}
			
			.simg>img {
				width: 100%;
				height: 100%;
			}
			
			.ssdiv {
				width: 75%;
			}
			
			.ssinp {
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">添加预约</h1>
		</header>
		<div class="mui-content mui-scroll-wrapper" id="refreshContainer">
			<div class="mui-scroll">
		    <div class="content">
		    	<div class="search">
		    		<!--<div class="simg">
		    			<img src="../../img/ss-img2.png"/>
		    		</div>-->
		    		<div class="stext fe09" id="stext">
						手机
						<div class="sjx">
						</div>
					</div>
		    		<!--<div class="ssdiv">
		    			<input class="ssinp" type="" name="" id="card_number" value=""  placeholder="请输入编码或名称"/>
		    		</div>-->
		    		<div class="ssdiv">
						<form action="" onkeydown="if(event.keyCode==13)return false;">
							<input id="keyvalue" class="ssinp" placeholder="请输入手机号/卡号/姓名" />
						</form>
					</div>
		    		<div class="simg" >
		    			<img id="goscann" src="../../img/saomiao.png"/>
		    			<!--
                        	作者：592176224@qq.com
                        	时间：2019-01-25
                        	描述：
		    			<img src="../../images/60x60.gif"/>
                        -->
		    		</div>
		    	</div>
		    </div>
		 <!--   <p style="padding-left: 1em;">会员列表</p>-->
		    <div class="textlist" id="tlist">
		    	
		    	<!--
                	作者：592176224@qq.com
                	时间：2019-01-29
                	描述：
               
		    	<div class="checklist" onclick="gopage()">
		    	    	<div class="flex1">
		    	    		<div class="left">
		    	    			<img src="../../images/60x60.gif"/>
		    	    		</div>
		    	    		<div class="right">
		    	    			<div class="flexrowbetween">
		    	    				<span id="">
		    	    					某某
		    	    				</span>
		    	    				<span class="fe07">
		    	    					消费：0次 
		    	    				</span>
		    	    			</div>
		    	    			<div id="" class="fe07">
		    	    				补水年卡    消费时间 2018-12-01
		    	    			</div>
		    	    			<div id="" class="fe07">
		    	    				余额：0.00元
		    	    			</div>
		    	    		</div>
		    	    	</div>
		    	</div>
		    	 -->
		    </div>
		    
				<div class="morediv hidden" id="moreid">
			   		<span id="more_list">更多</span>
			   	</div>
	    		<div id="" class="fgd"></div>
		    </div>
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/setStopped.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var page = 0,
				view = null,
				flag = false,
				type = "phone",			
				mlist = [],			//会员列表
			per_page = 25;
			window.onload = function(){
					
				mui.init({
					 pullRefresh: {
				        container: '#refreshContainer',
				        down: {
				        	height:50,//可选,默认50.触发下拉刷新拖动距离,
					        auto: false,//可选,默认false.首次加载自动下拉刷新一次
					        contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
					        contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
					        contentrefresh : "正在刷新...",
				            callback: pulldownRefresh
				        },
				        up:{
				        	callback: pullupRefresh
				        }
				    }
				});
				function pullupRefresh(){
					more_list();
					mui('#refreshContainer').pullRefresh().endPullupToRefresh();
				}
				function pulldownRefresh(){
					page = 1;
		      		mlist = [];
		      		getmemberlist();
		      		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
		      		mui('#refreshContainer').pullRefresh().refresh(true);
				}
				//监听扫描
				g("goscann").addEventListener("tap",function(e){
							var list = {
		                         pageid:"addTheBooking",
		                         returnfun:"setcard_number"
		            		}
		                    mui.openWindow({
		                        url: '../../general/scanning-page.html',
		                        id: 'scanning-page',
		                        extras: list,
		                        show: {
		                            aniShow: 'zoom-fade-in',
		                            duration: 300
		                        },
		                        waiting: {
		                            autoShow: true
		                        }
		                });
							
				})
				
				//设置查找条件
				var stextPicker = new mui.PopPicker();
				stextPicker.setData([{
					value: 'phone',
					text: '手机'
				}, {
					value: 'card_number',
					text: '卡号'
				}, {
					value: 'username',
					text: '昵称'
				}, {
					value: 'plate_number',
					text: '车牌号'
				}]);
				var stext = document.getElementById('stext');
				stext.addEventListener('tap', function(event) {
					mui('#refreshContainer').pullRefresh().setStopped(true);//暂时禁止滚动	
					stextPicker.show(function(items) {
						stext.innerHTML = items[0].text + '<div class="sjx"></div>';
						type = items[0].value;
						page = 1;
			            mlist = [];
					});
				}, false);
				
				$("#tlist").on("tap",".mui-media",function(){
					gopage($(this).attr("data-id"));
				})
				
				//更多
				g("more_list").addEventListener("tap",function(){
					more_list();
				})
				
				//getmember();
				
				document.onkeydown = function(event) {
					var e = event || window.event || arguments.callee.caller.arguments[0];
					if(e && e.keyCode == 13) {
						page = 1;
			            mlist = [];
						getmember();
					}
				}
			}
			
			//更多
			function more_list(){
				console.log("更多")
				page++;
                getmember();
			}
			
			function getmember(){
				var data = {
					url:"/api/member/lst",
					data:{
						access_token:acctoken(),
						key:g("keyvalue").value||"",
						type:type,
						page: page>0?page:1,
						
					}
				}
				ajax(data,function(res){
//					console.log("会员列表",res);
//					setlist(res.data.data);
					
					console.log("会员列表",res)
						let list = res.data.data;
						if(list.length){
							list.forEach(function(item,index){
								mlist.push(item);
							})
							mlist = remove_duplicate(mlist);
							setlist(mlist);
							$("#moreid").removeClass("hidden");
						}else{
							if(page == 1){
								let str = `<div class="nolistdiv">暂无记录<div>`
								g("tlist").innerHTML = str;
							}else{
								mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
								mui('#refreshContainer').pullRefresh().refresh(false);
								page--;
								$("#moreid").addClass("hidden");
								mui.toast('没有更多数据了');
							}
						}
				})
				
			}
			function setlist(data){
				var str = '<ul class="mui-table-view">';
				for (var i = 0; i <data.length; i ++) {
		    	
		    	    str += '<li class="mui-table-view-cell mui-media" data-id="'+data[i].id+'" >'+
		    	        '<a href="javascript:;">'
		    	        if(data[i].images&& data[i].images.path_name){
		    				str += '<img class="mui-media-object mui-pull-left border50" src="'+data[i].images.path_name+'">';
		    			}else{
		    				str += '<img class="mui-media-object mui-pull-left border50" src="../../img/member-header.png"/>';
		    			}
		    	        str += '<div class="mui-media-body">'+
		    	            data[i].username +
		    	            /*'<p class="mui-ellipsis">消费：'+
		    	            data[i].stay_money+' | 余额：' +data[i].use_money +
		    	            '</p>'+*/
		    	            '<p class="mui-ellipsis">消费：'+
		    	            data[i].stay_money+' | 余额：' +data[i].use_money +
		    	            '</p></div></a></li>';
				}
				str += '</ul>';
				g("tlist").innerHTML = str;
			}
			
			function gopage(mid){
				var list = {mid:mid}
				mui.openWindow({
					url:'addBookingDetails.html?mid='+mid,
					id:'addBookingDetails',
					extras: list
				})
			}
			
			
			
			// 扫码回调
			function setcard_number(scan) {
				console.log("回调")
				g("stext").innerHTML = '卡号<div class="sjx"></div>';
			    type = 'card_number';
				g("keyvalue").value = scan;
				page = 1;
			    mlist = [];
				getmember();
			}
		</script>
	</body>

</html>